<template lang="html">
    <div class="editor">
        <div ref="toolbar" class="toolbar">
        </div>
        <div ref="editor" class="text"></div>
        <p v-if="isShow" style="color:red;text-align: right;">编辑内容不能超过100个字</p>
        <span class="limitNum"><span id="spanId">{{ spanInfo }}</span>/100</span>
        <span class="el-icon-delete" @click="deleteStudent"></span>
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
        name: 'editoritem',
        data() {
            return {
                // uploadPath,
                editor: null,
                info_: null,
                spanInfo: 0,
                isShow: false,
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            index: {
                type: Number,
                required: true
            },
            value: {
                type: String,
                default: ''
            },
            isClear: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            isClear(val) {
                // 触发清除文本域内容
                if (val) {
                    this.editor.txt.clear()
                    this.info_ = null
                }
            },
            value: function(value, e) {
                if (value !== this.editor.txt.html()) {
                    //          获取纯文字 在获取img 相加就可以了
                    var temp = this.value.replace(/<\/?.+?>/g, "");
                    var result = temp.replace(/ /g, ""); //result为获取冲文字得到后的内容
                    //         获取img标签
                    var re = /<img[^>]+>/g;
                    var ImgA = this.value.match(re);
                    let imgLen;
                    if (ImgA) {
                        imgLen = ImgA.length
                    }
                    if (!ImgA) {
                        imgLen = 0
                    }
                    this.spanInfo = imgLen + result.length
                    if (this.spanInfo > 100) {
                        this.isShow = true
                    } else {
                        this.isShow = false
                    }
                    this.editor.txt.html(this.value)
                }
            }
            //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
        },
        mounted() {
            this.seteditor()
            //          获取纯文字 在获取img 相加就可以了
            var temp = this.value.replace(/<\/?.+?>/g, "");
            var result = temp.replace(/ /g, ""); //result为获取冲文字得到后的内容
            //         获取img标签
            var re = /<img[^>]+>/g;
            var ImgA = this.value.match(re);
            let imgLen;
            if (ImgA) {
                imgLen = ImgA.length
            }
            if (!ImgA) {
                imgLen = 0
            }
            this.spanInfo = imgLen + result.length
            if (this.spanInfo > 100) {
                this.isShow = true
            } else {
                this.isShow = false
            }
            this.editor.txt.html(this.value)
        },
        methods: {
            seteditor() {
                this.editor = new E(`#div1`)
                this.editor.config.height = 200
                this.editor.config.placeholder = '请填写内容'
                this.editor.config.menus = [
                    'head',
                    'fontSize',
                    'fontName',
                    'lineHeight',
                    'foreColor',
                    'justify',
                    // 'image',
                ]
                this.editor.config.uploadImgShowBase64 = true
                this.editor.config.showFullScreen = false
                this.editor.config.zIndex = 5
                this.editor.config.focus = true

                this.editor.customConfig.onchange = (html) => {
                    this.info_ = html // 绑定当前逐渐地值

                    //          获取纯文字 在获取img 相加就可以了
                    var temp = this.info_.replace(/<\/?.+?>/g, "");
                    var result = temp.replace(/ /g, ""); //result为获取冲文字得到后的内容
                    //         获取img标签
                    var re = /<img[^>]+>/g;
                    var ImgA = this.info_.match(re);
                    let imgLen;
                    if (ImgA) {
                        imgLen = ImgA.length
                    }
                    if (!ImgA) {
                        imgLen = 0
                    }
                    this.spanInfo = imgLen + result.length
                    //        去掉除img以外的所有标签；
                    var regL = /<\/?(?!img)[a-z]+?[^>]*>/gi;
                    var z = this.info_.replace(regL, "");
                    this.info_ = z

                    if (this.spanInfo > 100) {
                        this.isShow = true
                    } else {
                        this.isShow = false
                    }
                    this.$emit('change', this.info_) // 将内容同步到父组件中
                }
                // 创建富文本编辑器
                this.editor.create()
            },
            deleteStudent() {
                this.$emit('deleteIndex', this.index)
            }
        }
    }
</script>

<style lang="scss">
    .editor {
        width: 100%;
        margin: 0 auto;
        position: relative;
        height: 99px;
        border: 1px solid #ccc;
        line-height: 25px;

        .limitNum {
            position: absolute;
            right: 6px;
            bottom: 0px;
            color: #909399;
        }

        .el-icon-delete {
            position: absolute;
            right: -5%;
            top: 15%;
            cursor: pointer;
        }

        .toolbar {
            position: absolute;
            bottom: 0;
        }

        .w-e-toolbar .w-e-menu {
            padding: 0 10px;
        }

        .text {
            height: 98px;
            z-index: auto !important;

            .w-e-panel-container {
                z-index: 99999999;
                left: -1px;
                top: 100%;
                width: 70% !important;
                margin-left: 0 !important;
            }

            .w-e-text {
                overflow-y: auto;
            }
        }
    }
</style>
